<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>后台登陆</title>
	<link rel="stylesheet" href="login1/css/bootstrap.min.css" media="all"/>
	<link rel="stylesheet" href="login1/css/style.default.css" media="all"/>
	<link rel="stylesheet" href="login1/css/custom.css" media="all"/>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="loginDemo">
	<div class="page-holder d-flex align-items-center">
		<div class="container">
			<div class="row align-items-center py-5">
				<div class="col-5 col-lg-7 mx-auto mb-5 mb-lg-0">
					<div class="pr-lg-5"><img src="new/images/illustration.svg" alt="" class="img-fluid"></div>
				</div>
				<div class="col-lg-5 px-lg-4">
					<h1 class="text-base text-primary mb-4">The Best Manger</h1>
					<h2 class="mb-4">后台管理系统</h2>
					<p class="text-muted">本项目采用vue，以最美观的样式、最方便的操作打造一流的后台管理系统.</p>
					<div :model="loginForm" class="mt-4">
						<div class="form-group mb-4" >
							<div class="input-group mb-4">
								<div class="input-group-prepend">
									<span class="input-group-text border-0 shadow form-control-lg">用户账号</span>
								</div>
								<input type="text" v-model="loginForm.id"  placeholder="请输入您的登录账户"
									   class="form-control border-0 shadow form-control-lg">
							</div>

						</div>
						<div class="form-group mb-4">
							<div class="input-group mb-4">
								<div class="input-group-prepend">
									<span class="input-group-text border-0 shadow form-control-lg" >登录密码</span>
								</div>
								<input type="password" v-model="loginForm.password" placeholder="请输入您的登录密码"
									   class="form-control border-0 shadow form-control-lg text-violet">
							</div>

						</div>
						<div class="form-group mb-4">
							<div class="custom-control custom-checkbox">
								<input id="customCheck1" type="checkbox" checked class="custom-control-input">
								<label for="customCheck1" class="custom-control-label">Remember Me</label>
							</div>
						</div>
						<button type="submit" class="btn btn-primary shadow px-5" @click="LoginClick">登录</button>
					</div>
				</div>
			</div>
			<div align="right">
				<p class="mt-5 mb-0 text-gray-400 text-center">© 2020 - i 家政网后台管理系统</p>
			</div>
		</div>
	</div>
</div>

<script src="js/vue.js"></script>
<!-- Jquery Js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	var vm = new Vue({
		el: "#loginDemo",
		data: {
			loginForm:{
				id : "",
				password: ""
			},
		},
		methods:{
			LoginClick(){
				const that = this;
				if (that.loginForm.id == ""){
					layer.msg("请输入登录账号",{icon:2,time:1500});
					return false;
				}
				if (that.loginForm.password == ""){
					layer.msg("请输入登录密码",{icon:2,time:1500});
					return false;
				}
				const user={
					"account":that.loginForm.id,
					"pwd":that.loginForm.password,
					"type":2
				};
				$.ajax({
					url : "/user/login",
					async : false,
					type : "POST",
					contentType : 'application/json',
					dataType : 'json',
					data :JSON.stringify(user),
					success : function(result) {
						if(result.result == true){
							localStorage.setItem("account",that.loginForm.id);
							localStorage.setItem("user",result.data);
							layer.msg("登录成功",{icon:1,time:1500},function () {
								location.href="AdminIndex.html";
							});
						}else{
							layer.msg(result.message,{icon:2,time:1500});
						}

					}
				});
			}
		},
	})
</script>
</body>
</html>
